<template>
  <div class="container">
    <el-row class="top-row">
      <el-col :span="3" class="search-container">
        <el-input
          v-model="keyword"
          placeholder="模糊查询"
          suffix-icon="el-icon-search"
        />
      </el-col>

      <el-col :span="2">
        <el-select v-model="importance" placeholder="重要程度">
          <el-option label="高" value="1" />
          <el-option label="中" value="2" />
          <el-option label="低" value="3" />
        </el-select>
      </el-col>
      <el-col :span="5" :offset="12">
        <el-date-picker
          v-model="startToEndTimer"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          align="right"
        />
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="23">
        <el-table
          v-loading="hasLogListLoading"
          class="table-row"
          size="small"
          :data="logList"
        >
          <el-table-column
            label="租户"
            align="center"
            prop="shortcpname.ccompany"
          />
          <el-table-column label="一级菜单" align="center" prop="menu1" />
          <el-table-column label="二级菜单" align="center" prop="menu2" />
          <el-table-column label="三级菜单" align="center" prop="menu3" />
          <el-table-column label="按钮" align="center" prop="method_button" />
          <el-table-column label="重要性" align="center" prop="importance">
            <template slot-scope="{ row }">
              <span v-if="row.importance === 3" style=""> 低 </span>
              <span
                v-else-if="row.importance === 2"
                style="font-weight: 600; color: #e6a23c"
              >
                中
              </span>
              <span
                v-else-if="row.importance === 1"
                style="font-weight: 600; color: #f56c6c"
              >
                高
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作时间"
            align="center"
            prop="dt_ins"
            width="150px"
          />
          <el-table-column
            label="操作人员"
            align="center"
            prop="empid.cnname"
          />
          <el-table-column label="IP" align="center" prop="userip" />

          <el-table-column align="center" label="操作" width="300px">
            <template slot-scope="{ row }">
              <el-button
                type="info"
                icon="el-icon-view"
                size="mini"
                @click="openDetail(row)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row class="top-row">
      <el-col :span="20">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="logTotal"
          :page-size="size"
          :current-page.sync="page"
        />
      </el-col>

      <el-col :span="2" class="page-size-container">
        <el-select v-model="size" placeholder="页大小" size="small">
          <el-option
            v-for="(item, index) in sizeList"
            :key="index"
            :label="item + '条/页'"
            :value="item"
          />
        </el-select>
      </el-col>
      <el-col :span="2" class="page-total-container">
        总 {{ logTotal }} 条
      </el-col>
    </el-row>

    <el-dialog title="📄详情" :visible.sync="detail.show" width="25%">
      <log-detail :data="detail.target" />
      <span slot="footer" class="dialog-footer" />
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent } from "@vue/composition-api";
import { useLogList, useDetailWindow, pickerOptions } from "./states";
import LogDetail from "./LogDetail.vue";
import { hasLoggerPermission } from "./perm";
import { Message } from "element-ui";

export default defineComponent({
  components: { LogDetail },
  setup() {
    const { hasSelect } = hasLoggerPermission();

    if (hasSelect === false) {
      Message.warning("您没有对该页面的查询权限...");
    }

    const {
      logList,
      page,
      size,
      keyword,
      logTotal,
      importance,
      startToEndTimer,
      hasLogListLoading,
    } = useLogList();

    const { detail, openDetail } = useDetailWindow();

    return {
      logList,
      page,
      size,
      keyword,
      logTotal,
      importance,
      startToEndTimer,
      hasLogListLoading,
      detail,
      pickerOptions,

      sizeList: [10, 15, 20, 30, 40, 50],

      openDetail,
    };
  },
});
</script>

<style scoped>
.container {
  padding-left: 20px;
}

/* 顶行 */
.top-row {
  margin-top: 15px;
}
/* 搜索外部DIV容器 */
.search-container {
  padding-right: 10px;
}

/* 表格行 */
.table-row {
  margin-top: 10px;
}

.table-header {
  background-color: #ddd;
}

/* 页数选择外部DIV */
.page-size-container {
  padding-right: 15px;
}

/* 显示总页数外部div*/
.page-total-container {
  padding-top: 7px;
  font-size: 14px;
}
</style>
